<template>
  <el-drawer
    :visible="visible"
    size="100%"
    direction="rtl"
    :before-close="handleClose"
    :modal="false"
    custom-class="custom-dialog"
    :withHeader="false"
    destroy-on-close
    style="position: absolute"
  >
    <div class="dialog-title">
      <div class="back" @click="handleClose">
        <i class="el-icon-back"></i>
      </div>
      <div class="title">
        {{ info?.filename }}
      </div>
    </div>
    <div class="video-player" style="height: calc(100vh - 44px)">
      <!-- controls="false"  autoplay="false"-->
      <!-- <video id="r_pan_video_player" :src="videoShowPath" />
      <div class="video-ctrl"></div> -->
      <player
        v-if="videoShowPath"
        :videoList="videoList"
        :path="videoShowPath"
        :options="options"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="visible = false">确 定</el-button>
    </span>
  </el-drawer>
</template>
<script>
import panUtil from '../../../utils/common'
import fileService from '@/api/file'
import Player from './player.vue'
export default {
  props: {
    visible: false,
    info: {
      type: Object,
      default: function () {
        return {
          fileId: '',
          parentId: '',
          filename: '',
          folderFlag: 0,
          fileSizeDesc: '',
          fileType: 0,
          createTime: '',
          updateTime: '',
        }
      },
    },
  },
  components: {
    Player,
  },
  data() {
    return {
      videoName: '',
      activeIndex: '',
      videoShowPath: '',
      videoList: [],
      options: {
        autoplay: true,
        volume: 0.6,
        poster: '',
      },
    }
  },
  methods: {
    handleClose() {
      this.videoShowPath = ''
      this.$emit('update:visible', false)
      this.$emit('onClose')
    },
    init() {
      let _this = this
      fileService.list(
        {
          parentId: _this.info.parentId,
          fileTypes: '9',
        },
        function (res) {
          if (res.status === 0) {
            _this.renderVideoList(res.data)
            // _this.listenVideoPlayer()
          } else {
            _this.$message.error(res.message)
          }
        },
        function (err) {
          _this.$message.error(err)
        }
      )
    },
    selectVideo(index) {
      this.activeIndex = index
      this.videoList.some((item) => {
        if (item.fileId === index) {
          this.videoName = item.fileName
          this.videoShowPath = panUtil.getPreviewUrl(item.fileId)
          return true
        }
      })
    },
    renderVideoList(dataList) {
      let _this = this
      _this.videoList = new Array()
      dataList.forEach((item, index) => {
        item.filename = item.filename.substring(
          0,
          item.filename.lastIndexOf('.')
        )
        if (item.filename.length > 15) {
          item.filename = item.filename.substring(0, 16) + '...'
        }
        if (item.fileId === _this.info.fileId) {
          _this.videoName = item.filename
          _this.videoShowPath = panUtil.getPreviewUrl(item.fileId)
        }
        _this.videoList.push(item)
        _this.activeIndex = _this.info.fileId
      })
    },
    listenVideoPlayer() {
      let _this = this
      document.getElementById('r_pan_video_player').addEventListener(
        'ended',
        () => {
          _this.selectNext(_this.activeIndex)
        },
        false
      )
    },
    selectNext(currentFileId) {
      let i
      this.videoList.some((item, index) => {
        if (item.fileId === currentFileId) {
          i = index
          return true
        }
      })
      if (i === this.videoList.length - 1) {
        return
      }
      let item = this.videoList[++i]
      this.videoName = item.filename
      this.videoShowPath = panUtil.getPreviewUrl(item.fileId)
      this.activeIndex = item.fileId
    },
  },
  watch: {
    info: {
      handler: function (val) {
        if (val && val.filename && val.fileId && val.fileType === 9) {
          this.init()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // this.init()
  },
}
</script>
<style lang="scss" scoped>
:deep(.custom-dialog) {
  &.is-fullscreen {
    left: 194px;
    width: calc(100% - 194px);
    margin: 0;
  }
  .dialog-title {
    display: flex;
    font-size: 16px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 5px #ccc;
    z-index: 1;
    position: relative;
    .back {
      padding-right: 10px;
      transition: all 0.4s;
      cursor: pointer;
      &:hover {
        opacity: 0.5;
      }
    }
  }
  .el-drawer__body {
    background-color: #efefef;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .video-player {
      width: 100%;
      height: calc(100vh - 44px);
      position: relative;
      #r_pan_video_player {
        width: 100%;
        height: calc(100vh - 44px);
        background-color: #000;
        display: block;
      }
      .video-ctrl {
        position: absolute;
        bottom: 20px;
        border-radius: 10px;
        left: 50%;
        width: 500px;
        height: 50px;
        background-color: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, 0);
        color: #fff;
      }
    }
  }
}
</style>
